<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript实现简单的星级评分功能</title>
    <style>
        .content, .content1 {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #000;
        }

        .red {
            color: red;
        }

        .total-star {
            font-size: 20px;
            color: #333;
            font-weight: 700;
        }

        .star {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ccc;
            display: inline-block;
            margin-right: 5px;
            cursor: pointer;
        }

        .stars {
            color: orange;
            margin-left: 10px;
        }
        img {
           width: 100%;

        }
        .acdd{
            width: 60%;
            position: absolute;left: 0;bottom: 0;right: 0;
            margin:  auto;
        }

        body{
            color: #00B0E8;
            background-color: #0b58a2;
        }
    </style>

    <!-- ======================================================   -->


</head>
<body>
<h1>
    请对您对上一阶段学习的过程进行评价
</h1>
<div class="content">
    <span class="red">*</span>
    <span class="total-star">总体评价：</span>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <span class="stars">评分</span>
</div>
<div class="content1">
    <span class="red">*</span>
    <span class="total-star">内容丰富度：</span>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <span class="stars">评分</span>
</div>
<div>
    <input type="button" value="提交" onclick="doFind()"/>
</div>
<div>
    <img src="sys/a1.jpg" class="acdd" alt="图片" id="img">
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">


    window.onload = function () {

        var oCont = document.getElementsByClassName('content')[0];
        var oCont1 = document.getElementsByClassName('content1')[0];
        var aText1 = ['差', '较差', '好', '推荐', '力荐'];
        var aText2 = ['少', '较少', '一般', '多', '很多'];
        3
        //调用函数
        Stars(oCont, aText1);
        Stars(oCont1, aText2);

        function Stars(id, Txt) {

            var index = '';//使用这个index来记录星星被点击后的等级
            var index1 = '';
            //获取元素
            var aStar = id.getElementsByClassName('star');
            var oStars = id.getElementsByClassName('stars')[0];

            //让全部星星变灰
            function gray() {
                for (var v = 0; v < aStar.length; v++) {
                    aStar[v].style.backgroundColor = '#ccc';
                }

            }

            for (let i = 0; i < aStar.length; i++) {

                //设置星星颜色
                function starColor() {

                    // 前两个星星显示灰色
                    if (i <= 1) {
                        gray();
                        for (let t = 0; t <= i; t++) {
                            aStar[t].style.backgroundColor = '#999';
                        }
                    } else {
                        //后面星星都显示橙色
                        gray();
                        for (let j = 0; j <= i; j++) {
                            aStar[j].style.backgroundColor = 'orange';
                        }
                    }
                }

                //鼠标移入变换星星颜色
                aStar[i].onmouseover = function () {

                    oStars.innerHTML = Txt[i];
                    starColor();
                    //鼠标移出变灰，评论等级清空
                    this.onmouseout = function () {
                        gray();
                        oStars.innerHTML = '评分';
                        //这里必须为 === ，否则当index==0时，会进行隐式类型转换，变成 (index=='') ==> (0=='')  ==> (false==false)，直接return出去
                        if (index === '') {
                            return;
                        } else if (index <= 1) {//通过index重新设置后面鼠标移开后的星星等级
                            for (var n = 0; n <= index; n++) {
                                aStar[n].style.backgroundColor = '#999';
                            }
                            oStars.innerHTML = Txt[index];
                        } else {
                            for (var m = 0; m <= index; m++) {//通过index重新设置后面鼠标移开后的星星等级
                                aStar[m].style.backgroundColor = 'orange';
                            }
                            oStars.innerHTML = Txt[index];
                        }
                    }
                }

                //鼠标点击固定星星等级和评论等级
                aStar[i].onclick = function () {
                    // 关闭移出操作
                    this.onmouseout = null;
                    //星星等级
                    oStars.innerHTML = Txt[i];

                    if (i <= 1) {
                        for (let t = 0; t <= i; t++) {
                            aStar[t].style.backgroundColor = '#999';
                            //获取当前点击的是多少等级的星星，让后面鼠标移开后可以重新设置星星等级
                            index = t;

                        }
                        var a=index;

                        assignment(a);

                    } else {
                        for (let j = 0; j <= i; j++) {
                            aStar[j].style.backgroundColor = 'orange';
                            //获取当前点击的是多少等级的星星，让后面鼠标移开后可以重新设置星星等级
                            index1 = j;


                        }
                        var a=index1;

                        assignment(a);


                    }

                }
            }
        }
    }
    var c=0;
    var d=0;
    var op=0;
    function  assignment(a){
       if(op==0){
           c=a;
           op=1;
       }else{
           d=a;
           op=0;
       }

    }



    function doFind() {

        //========================提交（参数int c,d）========================

        alert("谢谢您的参与！！！")
        var url="doFIndEvaluate";
        var param={
                c,d
        }
        $.post(url,param,function () {
                location.href="doindexUI";
        })
    }



</script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            "scale": 1
        },
        "display": {
            "position": "left",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": 0
        },
        "mobile": {
            "show": false,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>
</body>
<script>
    var img=document.getElementById("img");
    var count=1;

    function changeImageSrc() {
        count++;
        //====拼接地址====
        img.src = "sys/a"+count+".jpg";

        if(count==5)
            count=0;
    };
    window.setInterval(changeImageSrc,1000);
</script>
<script>



    !function(){



        function n(n,e,t){



            return n.getAttribute(e)||t



        }



        function e(n){



            return document.getElementsByTagName(n)



        }



        function t(){



            var t=e("script"),o=t.length,i=t[o-1];



            return{



                l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)



            }



        }



        function o(){



            a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,



                c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight



        }



        function i(){



            r.clearRect(0,0,a,c);



            var n,e,t,o,m,l;



            s.forEach(function(i,x){



                for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],



                null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,



                    l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),



                    t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))



            }),



                x(i)



        }



        var a,c,u,m=document.createElement("canvas"),



            d=t(),l="c_n"+d.l,r=m.getContext("2d"),



            x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||



                function(n){



                    window.setTimeout(n,1e3/45)



                },



            w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,



            window.onmousemove=function(n){



                n=n||window.event,y.x=n.clientX,y.y=n.clientY



            },



            window.onmouseout=function(){



                y.x=null,y.y=null



            };



        for(var s=[],f=0;d.n>f;f++){



            var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})



        }



        u=s.concat([y]),



            setTimeout(function(){i()},100)



    }();



</script>
</html>